<template>
	<!-- 零工列表 -->
	<scroll-view class="scroll-view" :scroll-y="true" @scrolltolower="task_list" lower-threshold="300">

		<view class="list">
			<view class="job-info" v-for="item in jobList"
				@click="handleOpenJobDetail(item.id,item.applyNum,item.invitation,item.number)">

				<view>
					<text>{{ item.name.length>15 ? item.name.slice(0,15)+'...' : item.name }}</text>
					<text
						:style="{ color: item.applyNum >= item.number ? '#FF650C' : '#402110' }">{{ addTaskNumber(item.applyNum, item.invitation) >= item.number ? '已满' : (addTaskNumber(item.applyNum, item.invitation) +'/'+item.number+'人')}}</text>
				</view>
				<view>
					<view>
						<image src="http://images.linglinggong.net/icon1/14.png" mode="aspectFill"></image>
						<text :style="{width: '500rpx'}">{{ item.address }}</text>
					</view>
					<view>
						<text>{{ item.userName.slice(0, 3) }}</text>
						<image :src="imgPath + item.avatar" mode="aspectFill"></image>
					</view>
				</view>
				<view>
					<view class="tag">
						<text v-if="item.tomorrow" class="tag-tomorrow">明天</text>
						<text
							:style="{color: item.taskType===1 ? '#599E10' :  '#F39B19',border:  item.taskType===1 ? '1px solid #599E10': '1px solid #F39B19'}  ">{{ item.taskType===0 ? '计时' : item.taskType===1 ? '计件' : item.taskType===2 ? '计天' : ''}}</text>
						<text>{{ item.sex===0 ? '性别男' : item.sex===1 ? '性别女' : item.sex===2 ? '性别不限' : ''}}</text>
						<text v-if="item.age!=0 || item.age!=''">{{ item.sex===1 ? '20-45岁' : '25-40岁'}}</text>
						<text>{{ item.workTime }}小时</text>

					</view>

					<view>
						<text>诚信值：</text>
						<text>{{ item.integrity }}</text>
					</view>
				</view>

				<view>
					<!-- 工资 -->
					<text class="money"
						:style="{color: (item.jiacheTimess >0||item.vipflagdate=='1970-01-01 01:01:01')&&item.vipFlag==1 ? '#4E9800' : item.taskType===1 ? '#FF650C' :  '#FF650C'}  ">
						{{ item.jiacheTimess >0||item.vipflagdate=='1970-01-01 01:01:01' ? (item.reward+item.subsidy) : item.reward}}{{item.taskType===0 ? '元/小时' : item.taskType===1 ? '元/件' : item.taskType===2 ? '元/天' : ''}}

					</text>
					<!-- 保底时薪 -->

					<view class="money" :style="{color: item.vipFlag ? '#402110' : '#402110'}" align="center"
						style="position:relative; top:9rpx;right:68rpx;width: 235rpx; height: 37rpx; background-color: #FCC928;font-size: 24rpx;border-radius: 4rpx;"
						v-if="item.jiacheTimess >0">
						<image style="width: 29rpx; height: 28rpx;position:relative; top:1rpx;right:8rpx;"
							src="http://images.linglinggong.net/images/main/jinpaiindex.png"></image>

						距失效 {{item.jiacheTimes.slice(3,item.jiacheTimes.indexOf('.'))}}
						<!-- {{item.floorsAmount}}元/小时 -->
						<text style="font-size: 12px; position: relative; top: 0px;">
							<!--（ 保底 时薪）-->
						</text>
					</view>

					<!-- 距离 -->
					<text>{{ (Math.round(item.distance*1000)/1000).toFixed(2) }}km</text>
				</view>
				<!-- 补贴 -->
			</view>
		</view>
		<uni-load-more :status="hasFlag ? 'loading' : 'noMore'"></uni-load-more>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				jobList: [],
				screenObj: { //上传参数
					pageNum: 0,
					pageSize: 10,
					lat: '',
					lng: '',
					touserid: 0,
				},
				hasFlag: true,
				handleIsStop: true, // 是否允许切换，网速太慢时
			}
		},
		methods: {
			// 获取工作列表
			async task_list() {
				//	console.log('获取工作列表')
				if (!this.hasFlag) return // 说明已经没有更多啦
					++this.screenObj.pageNum


				// 是否允许切换，
				if (!this.handleIsStop) return // 说明上一条请求结果未返回
				this.handleIsStop = false
				this.screenObj.lat = uni.getStorageSync('location')[0]
				this.screenObj.lng = uni.getStorageSync('location')[1]
				if (uni.getStorageSync('userId')) {
					this.screenObj.touserid = uni.getStorageSync('userId')
				} else {
					this.screenObj.touserid = ''
				}
				//console.log(this.screenObj)
				let res = await this.$fetch(this.$api.task_listjinpai, this.screenObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})

				//	console.log(res.rows);

				// 是否允许切换
				this.handleIsStop = true
				//console.log(res)
				res.rows.forEach(item => {
					//console.log(item.sort)
					// 把地址后段删掉
					if (item.address.length != 0 || item.address.indexOf('·') != -1) {
						item.address = item.address.split('·')
						item.address = item.address.slice(0, 2).join('·')
					}



					// 工作时长
					item.workTime = this.calcWorkTime(item.startTime, item.endTime)
					let lenT = String(item.workTime).length
					item.workTime = lenT > 4 ? item.workTime.toFixed(1) : item.workTime
					// 是否是明天
					item.tomorrow = item.startTime.slice(0, 10) == this.tomorrow ? true : false
					// 将金额除以100，单位变为元
					item.floorsAmount = item.floorsAmount.divide(100)
					item.reward = item.reward.divide(100)
					item.subsidy = item.subsidy.divide(100)
					item.integrity = parseFloat(item.integrity).divide(100)
				})
				this.jobList = [...this.jobList, ...res.rows]
				this.hasFlag = this.jobList.length < res.total
				uni.stopPullDownRefresh()
			},
			//计算任务人数，报名加邀请的人数
			addTaskNumber(number, invitation) {
				let v = parseInt(number) + parseInt(invitation)
				return v
			},
			// 计算工作时长
			calcWorkTime(start, end) {
				let startT = start.replace(/-/g, '/')
				let endT = end.replace(/-/g, '/')
				startT = new Date(startT).getTime()
				endT = new Date(endT).getTime()
				let differenceT = (endT - startT) / (1000 * 60 * 60) //小时
				return differenceT
			},
			// 获取今天日期
			getToday() {
				var day_0 = new Date();
				day_0.setDate(day_0.getDate());
				this.toDay = this.formatDate(day_0)
				//明天的时间
				var day_1 = new Date();
				day_1.setDate(day_1.getDate() + 1);
				this.tomorrow = this.formatDate(day_1)
				// console.log('获取今天日期', this.toDay,this.tomorrow)
			},
			formatDate(date) {
				var d = date,
					month = '' + (d.getMonth() + 1),
					day = '' + d.getDate(),
					year = d.getFullYear();

				if (month.length < 2) month = '0' + month;
				if (day.length < 2) day = '0' + day;

				return [year, month, day].join('-');
			},
			// 刷新
			refresh() {
				this.screenObj.pageNum = 0
				this.screenObj.pageSize = 10
				this.hasFlag = true
				this.jobList = []
				this.task_list()
			},
			// 打开工作详情
			handleOpenJobDetail(taskId, applyNum, invitation, number) {
				/* 	console.log(taskId)//虚拟任务弹窗不能打开 */
				if (taskId == 1) return uni.showToast({
					title: '已满员，去看看其他零工吧！',
					icon: 'none'
				})
				if (applyNum >= number) return uni.showToast({
					title: '已满员，去看看其他零工吧！',
					icon: 'none'
				})
				if (this.addTaskNumber(applyNum, invitation) >= number) return uni.showToast({
					title: '邀请中,请稍后再试~',
					icon: 'none'
				})
				uni.navigateTo({
					url: '/pages/job-detail/job-detail?taskId=' + taskId
				})
			},
			
		},
		onPullDownRefresh() {
			this.refresh()

		},
		onReachBottom() {
			this.task_list()
		},
		async onShow() {
			this.imgPath = uni.getStorageSync('imgPath')
			this.screenObj = uni.getStorageSync('screenObj').region ? uni.getStorageSync('screenObj') : this.screenObj
			this.location = uni.getStorageSync('location') //当前位置的经纬度
			this.refresh()
			this.getToday()
			// this.scrollViewMarginTop = (await this.$refs.fixtitle.offsetHeight) + 'rpx'
			// console.log('000', window.getComputedStyle(this.$refs.fixtitle).height)
		},
	}
</script>

<style scoped>
	page {
		background-color: #FFFFFF;
	}
</style>

<style scoped lang="less">
	.scroll-view {
		// border-bottom: 1px solid #007AFF;
		width: 100vw;
		z-index: 2;
		background: #FFF;
		height: calc(100vh - var(--status-bar-height));
		position: fixed;
		margin-top: calc(var(--status-bar-height));

		// 列表
		.list {
			background-color: #FFFFFF;

			&>.employer-info {
				padding: 30rpx;
				// border-bottom: 1px solid #F2F2F2;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&>view {
					display: flex;

					&>image {
						width: 108rpx;
						height: 108rpx;
						margin-right: 30rpx;
					}

					&>view {
						display: flex;
						flex-direction: column;

						&>view:first-child {
							display: flex;
							margin-bottom: 20rpx;

							&>text {
								margin-right: 20rpx;
								height: 48rpx;
								font-size: 17px;
							}

							&>image {
								align-self: flex-end;
								width: 26rpx;
								height: 26rpx;
							}
						}

						&>view:last-child {
							height: 40rpx;
							display: flex;
							align-items: center;

							text:first-child {
								margin-right: 30rpx;
								color: rgba(64, 33, 16, 0.70);
							}

							text:last-child {
								font-weight: bold;
							}
						}
					}
				}

				&>view:last-child {
					flex-direction: column;
					text-align: right;

					&>text:first-child {
						margin-bottom: 2rpx;
						height: 34rpx;
						font-size: 12px;
						color: rgba(64, 33, 16, 0.70);
					}

					&>text:last-child {
						height: 60rpx;
						font-weight: bold;
						font-size: 22px;
						color: #F39B19;
					}
				}
			}

			&>.job-info {
				padding: 30rpx;
				position: relative;
				letter-spacing: 0;

				&>view:first-child {
					// border: 1px solid #007AFF;
					margin-bottom: 10rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					text:first-child {
						font-weight: bold;
						font-size: 17px;
					}
				}

				&>view:nth-child(2) {
					// border: 1px solid #007AFF;
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&>view:first-child {
						display: flex;
						align-items: center;

						&>image {
							width: 26rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}

						&>text {
							font-size: 12px;
							color: rgba(64, 33, 16, 0.70);
						}
					}

					&>view:last-child {
						display: flex;
						align-items: center;

						&>image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}

						&>text {
							margin-right: 10rpx;
							font-size: 12px;
							color: rgba(64, 33, 16, 0.70);
						}
					}

				}

				&>view:nth-child(3) {
					// border: 1px solid #007AFF;
					margin-bottom: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&>.tag {
						&>text {
							line-height: 34rpx;
							padding: 0 5rpx;
							margin-right: 10rpx;
							text-align: center;
							font-size: 12px;
							color: #F39B19;
							border: 1px solid #F39B19;
							border-radius: 2px;
						}

						.tag-tomorrow {
							color: #599E10;
							border: 1px solid #599E10;
						}
					}

					&>view {
						&>text {
							font-size: 12px;
							color: rgba(64, 33, 16, 0.70);
						}
					}
				}

				// 工资，距离
				&>view:nth-child(4) {
					// border: 1px solid #007AFF;
					// margin-bottom: 10rpx;
					display: flex;
					justify-content: space-between;

					&>text:first-child {
						font-size: 17px;
						font-weight: bold;
						color: #FF650C;
					}

					&>text:last-child {
						align-self: flex-end;
						font-size: 12px;
						color: rgba(64, 33, 16, 0.40);
					}

					&>.money {
						font-size: 17px;
						font-weight: bold;
					}

				}

				// 补贴
				&>.subsidy {
					font-size: 17px;
					font-weight: bold;
					color: #4E9800;
				}

				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					width: 720rpx;
					height: 2rpx;
					// border-radius: 1px;
					background: #F3F3F3;
				}
			}
		}
	}
</style>
